<template>
  <div class="main">
    <MyNavbar path="-1" title="市场数据"></MyNavbar>
    <van-sticky :offset-top="45.9">
      <van-dropdown-menu class="dropdown" active-color="#1989fa">
        <van-dropdown-item v-model="value1" :options="option1">
          <!-- <CityChange :questionFilters="questionFilters" v-model="cityName">
          </CityChange> -->
        </van-dropdown-item>
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
    </van-sticky>
    <div class="content">
      <!-- <button @click="btnClick">测试</button> -->
      <h2>工资收入</h2>
      <div id="Chart01" :style="{ width: '380px', height: '240px' }"></div>
      <h2>工作经验</h2>

      <div id="Chart02" :style="{ width: '100%', height: '260px' }"></div>
      <h2>平均工资</h2>

      <div id="Chart03" :style="{ width: '100%', height: '260px' }"></div>
      <h2>就业趋势</h2>

      <div id="Chart04" :style="{ width: '100%', height: '260px' }"></div>
      <br />
      <div v-show="false">{{ employmentNum }}</div>
    </div>
  </div>
</template>

<script>
import { chartStatistics, chartIndexes } from '@/api/login.js'
export default {
  name: 'MyChart',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      cityName: '北京',
      params: {
        city: '北京', // 是string城市名
        position: '前端工程师' // 是string职位名
      },
      totalData: {},
      percentSalary: [],
      experienceArr: [],
      yearSalary: [],
      employmentNum: [],
      value1: 0,
      value2: 0,
      option1: [
        { text: '北京', value: 0 },
        { text: '上海', value: 1 },
        { text: '广州', value: 2 }
      ],
      option2: [
        { text: '前端工程师', value: 0 },
        { text: '后台', value: 1 },
        { text: 'UI', value: 2 }
      ]
    }
  },
  created () {
    this.getData()
    this.getCity()
  },
  updated () {
    this.drawLine01()
    this.drawLine02()
    this.drawLine03()
    this.drawLine04()
  },

  mounted () {
    // this.drawLine01()
    // this.drawLine02()
    // this.drawLine03()
    // this.drawLine04()
  },
  methods: {
    drawLine01 () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(
        document.getElementById('Chart01'),
        null,
        {
          // width: 160
          // hight: 280
        }
      )
      // 绘制图表
      // myChart.resize({ width: 200, height: 300 })
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        color: [
          '#73a0fa',
          '#73deb3',
          '#7585a2',
          '#eb7e65',
          '#f7c739',
          '#f7c739',
          '#ca8622',
          '#bda29a',
          '#6e7074',
          '#546570',
          '#c4ccd3'
        ],
        title: {
          show: false,
          text: '工资收入'
        },
        legend: {
          top: 'center',
          right: '0',
          width: '100%',
          orient: 'vertical'
        },
        series: [
          {
            name: '工资收入',
            type: 'pie',
            radius: ['35%', '50%'],
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.percentSalary
            // data: [
            //   {
            //     value: this.totalData.percentSalary[1].percent,
            //     name: this.totalData.percentSalary[1].assetType
            //   },
            //   { value: 8, name: 'Search Engine' },
            //   { value: 5, name: 'Direct' },
            //   { value: 2, name: 'Email' },
            //   { value: 4, name: 'Union Ads' },
            //   { value: 1, name: 'Video Ads' }
            // ]
          }
        ]
      })
    },
    drawLine02 () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('Chart02'))
      // 绘制图表
      myChart.setOption({
        color: ['#00b8d4', '#e5f8fb', '#e5f8fb'],
        grid: { left: 50 },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            interval: 1
          },
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data: this.experienceArr.map(item => {
            return item.info
          })
        },
        title: {
          show: false,
          text: '工作经验'
        },
        yAxis: {
          type: 'value',
          nameTextStyle: {
            width: 500,
            fontSize: 40,
            overflow: 'breakAll'
          },
          scale: true,
          splitNumber: 4,
          axisTick: {
            interval: 1
          }
        },
        series: [
          {
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            data: this.experienceArr.map(item => {
              return item.value
            }),
            type: 'line',
            areaStyle: {
              color: '#17bed8',
              opacity: 0.2
            }
          }
        ]
      })
    },
    drawLine03 () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('Chart03'))
      // 绘制图表
      myChart.setOption({
        color: ['#00b8d4', '#e5f8fb', '#e5f8fb'],
        grid: { left: 50 },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.yearSalary.map(item => {
            return item.year
          })
        },
        yAxis: {
          type: 'value',
          scale: true,
          splitNumber: 4,
          axisTick: {
            interval: 1
          }
        },
        title: {
          show: false,
          text: '平均工资'
        },

        series: [
          {
            data: this.yearSalary.map(item => {
              return item.salary
            }),
            type: 'line',
            areaStyle: {
              color: '#17bed8',
              opacity: 0.2
            }
          }
        ]
      })
    },
    drawLine04 () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('Chart04'))
      // 绘制图表
      myChart.setOption({
        grid: { left: 50 },
        color: ['#00b8d4', '#e5f8fb', '#e5f8fb'],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.employmentNum.map(item => {
            return item.date
          })
        },
        yAxis: {
          type: 'value',
          scale: true,
          splitNumber: 4,
          axisTick: {
            interval: 1
          }
        },
        title: {
          show: false,
          text: '就业趋势'
        },
        series: [
          {
            data: this.employmentNum.map(item => {
              return item.value
            }),
            type: 'line',
            smooth: true,
            areaStyle: {
              color: '#17bed8',
              opacity: 0.2
            }
          }
        ]
      })
    },
    async getData () {
      this.$toast.loading({ message: '加载中' })
      const res = await chartStatistics({
        ...this.params
      })
      this.totalData = { ...res.data }
      this.percentSalary = this.totalData.percentSalary.map(item => {
        return { value: item.percent, name: item.assetType }
      })
      this.experienceArr = this.totalData.experienceSalary
      this.yearSalary = this.totalData.yearSalary
      this.employmentNum = this.totalData.employmentNum
      console.log(res)
      this.$nextTick(() => {
        this.$toast.clear()
      })
    },
    async getCity () {
      const res = await chartIndexes()
      this.cityName = res.data
      console.log('city', res)
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  ::v-deep .dropdown {
    .van-dropdown-menu__bar {
      box-shadow: none !important;
    }
  }
}
.content {
  padding: 40px;
  h2 {
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
      Segoe UI, Arial, Roboto, PingFang SC, Hiragino Sans GB, Microsoft Yahei,
      sans-serif;
    font-weight: 500;
    font-size: 36px;
    margin-bottom: 15px;
  }
  #Chart01 {
    margin-left: -120px;
    width: 375px;
    // background-color: pink;
  }
}
</style>
